<template>
	<view class="container">
		<view class="portContainer">
			<view class="portleft">Port1</view>
			<view class="portright">
				<view class="up">
					<view class="left">入库</view>
					<view class="right">
						<checkbox-group @change="handlerChange">
							<label>
								<checkbox value="cb1" :checked="portFirstFlag" style="transform:scale(1.2)"/>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="down">
					<view class="left">出库</view>
					<view class="right">
						<checkbox-group @change="handlerChange">
							<label>
								<checkbox value="cb2" :checked="!portFirstFlag" style="transform:scale(1.2)"/>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view class="portContainer" style="margin-top: 20rpx;">
			<view class="portleft">Port2</view>
			<view class="portright">
				<view class="up">
					<view class="left">入库</view>
					<view class="right">
						<checkbox-group @change="handlerChange">
							<label>
								<checkbox value="cb3" :checked="portSecondFlag" style="transform:scale(1.2)"/>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="down">
					<view class="left">出库</view>
					<view class="right">
						<checkbox-group @change="handlerChange">
							<label>
								<checkbox value="cb4" :checked="!portSecondFlag" style="transform:scale(1.2)"/>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 20rpx;">
			<u-button type="primary">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				portFirstFlag: true,
				portSecondFlag: false
			}
		},
		methods: {
			handlerChange(val) {
				switch(val.detail.value[0]) {
					case 'cb1':
						return this.portFirstFlag = true
					case 'cb2':
						return this.portFirstFlag = false
					case 'cb3':
						return this.portSecondFlag = true
					case 'cb4':
						return this.portSecondFlag = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.portContainer {
	width: 100%;height: 15vh;display: flex;box-sizing: border-box;
	.portleft {
		border: 2rpx solid #000000;box-sizing: border-box;flex: 1;width: 100%;height: 100%;text-align: center;display: flex;align-items: center;justify-content: center;
	}
	.portright {
		flex: 2;margin-left: 20rpx;box-sizing: border-box;display: flex;flex-direction: column;
		.up {
			display: flex;flex: 1;box-sizing: border-box;border: 2rpx solid #000000;
			.left {
				flex: 3;display: flex;align-items: center;justify-content: center;box-sizing: border-box;
			}
			.right {
				display: flex;align-items: center;justify-content: center;margin-left: 10rpx;flex: 1;
			}
		}
		.down {
			display: flex;flex: 1;margin-top: 10rpx;box-sizing: border-box;border: 2rpx solid #000000;
			.left {
				flex: 3;display: flex;align-items: center;justify-content: center;box-sizing: border-box;
			}
			.right {
				display: flex;align-items: center;justify-content: center;margin-left: 10rpx;flex: 1;
			}
		}
	}
}
</style>
